import React, { useEffect, useState } from 'react';

import { Table, Space } from 'antd';
import moment from 'moment';
import EditDrawer from './component/EditDrawer';

import { getAllArticles } from '../../api/actions/article';

export default () => {
  const [dataSource, setDataSource] = useState([]);
  const [loading, setLoading] = useState(true);

  // EditDrawer
  const [editDrawerVisible, setEditDrawerVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState();

  const handleEditClick = (record) => {
    setEditDrawerVisible(true);
    setCurrentRecord(record);
  };

  const fetchData = async () => {
    setLoading(true);
    const result = await getAllArticles();
    setDataSource(result.data);
    setLoading(false);
  };

  const onFinish = () => {
    fetchData();
    setEditDrawerVisible(false);
  };

  const handleEditDrawerClose = () => {
    setEditDrawerVisible(false);
  };

  const columns = [
    {
      title: '文章标识',
      dataIndex: '_id',
      fixed: 'left',
      width: 250,
    },
    {
      title: '文章标题',
      dataIndex: 'title',
      width: 200,
    },
    {
      title: '作者',
      dataIndex: 'userInfo',
      width: 250,
      render(value) {
        const { name } = value;
        return (<a>{name}</a>);
      },
    },
    {
      title: 'Banner图',
      dataIndex: 'banner',
      width: 200,
    },
    {
      title: '最后修改时间',
      dataIndex: 'lastModify',
      width: 200,
      render(v) {
        return v && moment(v).format('YYYY-MM-DD HH:mm');
      },
    },
    {
      title: '内容',
      dataIndex: 'post',
      width: 200,
      render: () => (
        <a>查看</a>
      ),
    },
    {
      title: '是否推荐',
      dataIndex: 'recommend',
      width: 150,
      render(v) {
        switch (v) {
          case 0:
            return '不推荐';
          case 1:
            return '普通推荐';
          case 2:
            return '强力推荐';
          default:
            return '不推荐';
        }
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 150,
      render(v) {
        switch (v) {
          case -1:
            return '已删除';
          case 0:
            return '草稿';
          case 1:
            return '审核中';
          case 2:
            return '已发布';
          default:
            return '未知';
        }
      },
    },
    {
      title: '创建时间',
      dataIndex: 'time',
      width: 200,
      render(v) {
        return v && moment(v).format('YYYY-MM-DD HH:mm');
      },
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: 100,
    },
    {
      title: '操作',
      width: 200,
      fixed: 'right',
      render: (text, record) => (
        <Space size="middle">
          <a onClick={() => { handleEditClick(record); }} aria-hidden="true">
            操作
          </a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    fetchData();
  }, []);
  return (
    <>
      <EditDrawer
        visible={editDrawerVisible}
        data={currentRecord}
        onFinish={onFinish}
        onClose={handleEditDrawerClose}
      />
      <Table
        scroll={{ y: 'calc(100vh - 60px)' }}
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        rowKey={(r) => r._id}
      />
    </>
  );
};
